﻿@page "/components/tooltip"

<DocsPage>
    <DocsPageHeader Title="Tooltip" Component="@nameof(MudTooltip)" SubTitle="A small popup which provides more information.">
        <Description>
            Use tooltips to add additional context to a button or other UI element.
        </Description>
    </DocsPageHeader>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Simple Tooltips">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="@nameof(TooltipSimpleExample)">
                <TooltipSimpleExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Arrow Tooltips">
                <Description>The tooltip can display arrows pointing to its activator, set the <CodeInline>Arrow</CodeInline> property to true to show them.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(TooltipArrowExample)" ShowCode="false">
                <TooltipArrowExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Colored Tooltips">
                <Description>Tooltips can be displayed in different colors with the <CodeInline>Color</CodeInline> property.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(TooltipColorExample)">
                <TooltipColorExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="HTML Tooltips">
                <Description>With the <CodeInline>TooltipContent</CodeInline> render fragment, you can specify custom HTML content for your tooltip.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(TooltipHtmlExample)">
                <TooltipHtmlExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Transitions">
                <Description>The tooltip's default delay can be set with <CodeInline>Delay</CodeInline> as a double in milliseconds.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(TooltipTransitionsExample)" ShowCode="false">
                <TooltipTransitionsExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Activation Events">
                <Description>
                    With the <CodeInline>ShowOnHover</CodeInline>, <CodeInline>ShowOnFocus</CodeInline> and <CodeInline>ShowOnClick</CodeInline> parameters, it is possible to choose which events activate and deactivate the tooltip.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(TooltipActivationExample)" FullWidth="true" ShowCode="false">
                <TooltipActivationExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>
